<script setup lang="ts">
import { ref } from 'vue';
import bottomSec from '../../components/bottomSec.vue';

/**
 * 打开 unlock 弹窗
 */
const unlock = ref<any>(null);
 const openUnlock = () => {
    unlock.value.open()
}

/**
 * 关闭函数
 *
 * 调用 unlock.value.close() 方法关闭 unlock 弹窗
 */
const close = () => {
    unlock.value.close()
}
</script>

<template>
    <view class="page">
        <video class="video" src=""></video>
        <view class="bottom">
            <view class="bottom-feature">
                <view class="del">
                    <image style="width: 48rpx;height: 48rpx;" src=""/>
                    <text>删除</text>
                </view>
                <view class="btn" @click="openUnlock">
                    <image style="width: 48rpx;height: 48rpx;" src=""/>
                    <text>解锁</text>
                </view>
            </view>
            <bottomSec />
        </view>
    </view>
    <uni-popup ref="unlock">
            <view class="unlock-content">
                <view class="unlock-title">解锁视频</view>
                <view class="unlock-text">解锁当前视频需要花费1积分,解锁后可以下载发布视频</view>
                <view class="unlock-btns">
                    <button class="unlock-cancel" @click="close">取消</button>
                    <button class="unlock-open">解锁</button>
                </view>
            </view>
        </uni-popup>
</template>

<style lang="scss" scoped>
    .page{
        position: fixed;
        width: 100%;
        height: 100%;
        .video{
            height: calc(100% - 166rpx);
            width: 100%;
        }
        .bottom{

            .bottom-feature{
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                height: 98rpx;
                padding: 10rpx 32rpx 0;
                .del{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 22rpx;
                    color: rgb(69,70,74);
                }
                .btn{
                    width: 606rpx;
                    height: 88rpx;
                    background-color: rgb(255,205,39);
                    border-radius: 596rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 32rpx;
                    color: rgb(48,49,51);
                }
            }
        }
    }
    .unlock-content{
            width: 582rpx;
            height: 356rpx;
            border-radius: 16rpx;
            background-color: #fff;
            padding: 36rpx;
            .unlock-title{
                font-size: 34rpx;
                color: rgb(69,70,74);
                margin-bottom: 30rpx;
            }
            .unlock-text{
                font-size: 28rpx;
                color: rgb(144,147,153);
                margin-bottom: 42rpx;
            }
            .unlock-btns{
                display: flex;
                justify-content: space-between;
                align-items: center;
                .unlock-cancel{
                    width: 244rpx;
                    height: 80rpx;
                    background-color: rgb(239,239,239);
                    border-radius: 276rpx;
                    color: rgb(48,49,51);
                    font-size: 32rpx;
                    text-align: center;
                    line-height: 80rpx;
                }
                .unlock-open{
                    width: 244rpx;
                    height: 80rpx;
                    background-color: rgb(255,205,39);
                    border-radius: 276rpx;
                    color: rgb(48,49,51);
                    font-size: 32rpx;
                    text-align: center;
                    line-height: 80rpx;
                }
            }
        }
</style>